<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车-四页</title>
    <!-- 引入公共样式  -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    
    <!-- 引入当前文件样式  -->
    <link rel="stylesheet" href="./css/shopping.css">
    <link rel="stylesheet" href="./css/reset.css">

</head>

<body>
    <!--网页头部 -->
    <header>
        <!-- 头部导航栏 -->
        <div class="top-nav">
            <div class="welcome container clearfix">
                <span class="fr">欢迎光临<a href="#">乐购</a>，请先 <a href="./record.html">登录</a>\<a href="#">注册</a></span>
            </div>
        </div>

        <div class="nav container clearfix">
            <div class="img fl">
                <!-- logo图 -->
                <img src="./img/logo.jpg" alt="">
            </div>

            <div class="box fr">
                <!-- 搜索框 -->
                <div class="clearfix">
                    <form action="#" class="form">
                        <input class="inp" type="text" placeholder="创意文具">
                        <button class="btn" type="submit">搜索</button>
                    </form>

                    <div class="cart">
                        <a href="./shopping.html" class="right-shop fr">
                            <span class="shop"><i></i>购物车 3</span>
                            <span class="order">我的订单</span>
                        </a>
                        <div class="side fr">
                            <a href="./index.html">首页</a>
                            <a href="./Product.html">商品列表</a>
                            <a href="./details3.html">产品详情</a>
                            <a href="./shopping.html">购物车</a>
                            <a href="./record.html">登录</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                            <a href="#">首页</a>
                        </div>
                    </div>
                </div>

                <!-- 导航列表 -->
                <div>

                </div>
            </div>
        </div>

    </header>

    <!-- 网页主体 -->
    <tbody>
        <!-- shopping -->
        <div class="header container">
                <!-- 头部 -->
                <ul class="list_header">
                  <li class="list_chk">
                    <!-- <input type="checkbox" id="selall">  -->
                    <div class="shop_info">
                      <!-- 单个店铺的全选 -->
                      <input type="checkbox" class="all_check ">
            
                    </div>
                  </li>
                  <li class="list_con">商品信息</li>
                  <li class="list_info">商品参数</li>
                  <li class="list_price">单价</li>
                  <li class="list_amount">数量</li>
            
                  <li class="list_sum">金额</li>
                  <li class="list_op">操作</li>
                </ul>
                <!-- 第一个店铺 -->
                <div class="cartbox">
                  <!-- 店铺信息 -->
            
                  <!-- 订单主要区域 -->
                  <div class="order_content">
                    <ul class="order_lists mt10 clearfix">
                      <li class="list_chk">
                        <!-- 单个复选框 -->
                        <input type="checkbox" class="son_check">
                      </li>
                      <li class="list_con">
                        <div class="list_img fl">
                          <a href="javascript:;">
                            <img src="./imgs/1.jpg" alt="">
                          </a>
                        </div>
                        <div class="list_text fl">
                          <a href="#">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</a>
                        </div>
                      </li>
                      <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                      </li>
                      <li class="list_price">
                        <!-- 单价 -->
                        <p class="price">￥<span>500</span></p>
                      </li>
                      <!-- 数量  -->
                      <li class="list_amount">
                        <div class="amount_box">
                          <!-- 减 -->
                          <a class="reduce fl">-</a>
                          <input type="number" value="1" class="sum fl">
                          <!--  加 -->
                          <a class="plus fl">+</a>
                        </div>
                      </li>
                      <li class="list_sum">
                        <!-- 小计结果 -->
                        <p class="sum_price">￥<span>500</span></p>
                      </li>
                      <li class="list_op">
                        <p class="del">
                          <a class="delbtn">移除商品</a>
                        </p>
                      </li>
                    </ul>
                    <ul class="order_lists mt10 clearfix">
                      <li class="list_chk">
                        <!-- 单个复选框 -->
                        <input type="checkbox" class="son_check">
                      </li>
                      <li class="list_con">
                        <div class="list_img fl">
                          <a href="javascript:;">
                            <img src="./imgs/1.jpg" alt="">
                          </a>
                        </div>
                        <div class="list_text fl">
                          <a href="#">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</a>
                        </div>
                      </li>
                      <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                      </li>
                      <li class="list_price">
                        <p class="price">￥<span>500</span></p>
                      </li>
                      <li class="list_amount">
                        <div class="amount_box">
                          <!-- 减 -->
                          <a class="reduce fl">-</a>
                          <input type="text" value="1" class="sum fl">
                          <!--  加 -->
                          <a class="plus fl">+</a>
                        </div>
                      </li>
                      <li class="list_sum">
                        <!-- 小计结果 -->
                        <p class="sum_price">￥<span>500</span></p>
                      </li>
                      <li class="list_op">
                        <p class="del">
                          <a class="delbtn">移除商品</a>
                        </p>
                      </li>
                    </ul>
                    <ul class="order_lists mt10 clearfix">
                      <li class="list_chk">
                        <!-- 单个复选框 -->
                        <input type="checkbox" class="son_check">
                      </li>
                      <li class="list_con">
                        <div class="list_img fl">
                          <a href="javascript:;">
                            <img src="./imgs/1.jpg" alt="">
                          </a>
                        </div>
                        <div class="list_text fl">
                          <a href="#">木果果木2016秋装新品韩范简约宽松中长款纯棉长袖衬衫</a>
                        </div>
                      </li>
                      <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                      </li>
                      <li class="list_price">
                        <p class="price">￥<span>500</span></p>
                      </li>
                      <li class="list_amount">
                        <div class="amount_box">
                          <!-- 减 -->
                          <a class="reduce fl">-</a>
                          <input type="text" value="1" class="sum fl">
                          <!--  加 -->
                          <a class="plus fl">+</a>
                        </div>
                      </li>
                      <li class="list_sum">
                        <!-- 小计结果 -->
                        <p class="sum_price">￥<span>500</span></p>
                      </li>
                      <li class="list_op">
                        <p class="del">
                          <a class="delbtn">移除商品</a>
                        </p>
                      </li>
                    </ul>
                  </div>
                
            
            
            
                <!-- 底部 -->
                <div class="btmbox">
            
                  <!-- <input type="checkbox" class="all_check ml30">
                    <span>全选</span>  -->
                  <a class="delallsel">删除选中商品</a>
                  <p class="fr">
                    <span>已选择<strong class="cf40 amount">0</strong>件商品</span>
                    <span>共计<strong class="cf40 totalprice">0.00</strong>元</span>
                    <a href="#">去结算</a>
                  </p>
            
            
                </div>
              </div>
            </div>

            <!-- 猜你喜欢 -->
            <div class="mymagnifier-center container">
              <div class="center-top">
                  <h2>猜你喜欢</h2>
              </div>
  
              <div class="center-bottom clearfix">
                  
                  <li class="center-li fl">
                      <img src="./img/22935553-1_l.jpg" alt="">
                      <img src="./img/03-bazhe_03.jpg" alt="">
                      <h5>白夜行  东野上吾</h5>
                      <img src="./img/03-tuijian_03.jpg" alt="">
                      <p class="sprice">￥38<span>￥58</span></p>
                  </li>
                  <li class="center-li fl">
                      <img src="./img/22935553-1_l.jpg" alt="">
                      <img src="./img/03-bazhe_03.jpg" alt="">
                      <h5>白夜行  东野上吾</h5>
                      <img src="./img/03-tuijian_03.jpg" alt="">
                      <p class="sprice">￥38<span>￥58</span></p>
                  </li>
                  <li class="center-li fl">
                      <img src="./img/22935553-1_l.jpg" alt="">
                      <img src="./img/03-bazhe_03.jpg" alt="">
                      <h5>白夜行  东野上吾</h5>
                      <img src="./img/03-tuijian_03.jpg" alt="">
                      <p class="sprice">￥38<span>￥58</span></p>
                  </li>
                  <li class="center-li fl">
                      <img src="./img/22935553-1_l.jpg" alt="">
                      <img src="./img/03-bazhe_03.jpg" alt="">
                      <h5>白夜行  东野上吾</h5>
                      <img src="./img/03-tuijian_03.jpg" alt="">
                      <p class="sprice">￥38<span>￥58</span></p>
                  </li>
                  <li class="center-li fl">
                      <img src="./img/22935553-1_l.jpg" alt="">
                      <img src="./img/03-bazhe_03.jpg" alt="">
                      <h5>白夜行  东野上吾</h5>
                      <img src="./img/03-tuijian_03.jpg" alt="">
                      <p class="sprice">￥38<span>￥58</span></p>
                  </li>
              
              </div>
          </div>
    </tbody>


    <!--网页尾部 -->
    <footer >
        <!-- 尾部导航 -->
        <div class="foot ">
            <div class="foot-nav container">
                <a href="#"><img src="./img/222_11.png" alt=""></a>
                <a href="#"><img src="./img/222_13(1).png" alt=""></a>
                <a href="#"><img src="./img/222_15.png" alt=""></a>
                <a href="#"><img src="./img/222_17.png" alt=""></a>
            </div>
        </div>

        <ul class="container clearfix">
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-links">
                <a href="" class="first-links">购物指南</a>
                <div class="links-aside">
                    <a href="">购物流程</a>
                    <a href="">发票制度</a>
                    <a href="">账户管理</a>
                    <a href="">会员优惠</a>
                </div>
            </li>
            <li class="foot-img fr">
                <img src="./img/logo_00.png" alt="">
            </li>
        </ul>

        <!-- 公司简介 -->
        <div class="introduce container">
            <span>公司简介：</span>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
            <a href="#">乐购招商</a>
        </div>

        <!-- 网站页脚 -->
        <div class="footer-tips container">
            <p>Page Mode shows headers, footers, footnotes and page numbers. </p>
        </div>
    </footer>

    <!-- 引入当前文件的js -->
    
    <script src="./lib/jquery.min.js"></script>
    <script src="./js/index2.js"></script>
    <script src="./lib/jquery.slidebox.js"></script>
     <!-- 放大镜 -->
     <!-- <script src="./js/magnifier(1).js"></script> -->
    <!-- 公共样式 -->
    <script src="./js/common.js"></script>
    <script src="./js/shopping.js"></script>
   
</body>

</html>